<template>
  <view class="home-data-list">
    <view
      v-for="item in dataList"
      :key="item.id"
      class="data-item"
    >
      <view class="data-item-img">
        <image
          class="img"
          :src="judgeShowImage(info.coverUrl, info.liveUrl)"
          mode="aspectFill"
        />
      </view>
      <view class="data-item-info">
        <view class="info-title">{{ item.name }}</view>
        <view class="info-item">活动礼堂：{{ item.hallId_dictText }}</view>
        <view class="info-item">活动时间：{{ item.date }}</view>
        <view class="info-operator">
          <text
            class="info-status"
            :style="{ color: returnStatusColor(item.status, activityState) }"
          >
            {{ item.status_dictText }}
          </text>
          <view
            class="info-btn"
            @click="
              uniNavigateTo(`/pages-sub/activity/detail/index?id=${item.id}`)
            "
          >
            详情
          </view>
        </view>
      </view>
    </view>
    <wd-loadmore
      finished-text="没有更多了"
      :state="loadState"
      @reload="getDataList"
    />
  </view>
</template>

<script setup>
import ActivityApi from '@/service/activity'
import { uniNavigateTo, returnStatusColor, judgeShowImage } from '@/utils/index'
import { useUserStore } from '@/store'
import { useDictStore } from '@/store/dict'
import { onReachBottom } from '@dcloudio/uni-app'

const { activityState } = useDictStore().dictData

const loadState = ref('loading')
const pageObj = ref({
  pageNo: 1,
  pageSize: 10,
})
const dataList = ref([])

const getDataList = async () => {
  if (loadState.value === 'finished') return
  try {
    const params = {
      ...pageObj.value,
      column: 'date',
      order: 'desc',
      status: 'complete', // 只需要看已经完成的
    }
    const { code, result } = await ActivityApi.getActivityList(params)
    console.log('data', result)
    if (code === 200 && result) {
      const { records, pages } = result
      if (records?.length) {
        dataList.value = [...dataList.value, ...records]
      }
      if (pageObj.value.pageNo < pages) {
        pageObj.value.pageNo++
      } else {
        loadState.value = 'finished'
      }
    } else {
      loadState.value = 'error'
    }
  } catch (e) {
    loadState.value = 'error'
  }
}

const reset = () => {
  pageObj.value.pageNo = 1
  dataList.value = []
  loadState.value = 'loading'
}

const refreshList = () => {
  reset()
  getDataList()
}

const refresherTriggered = ref(false)
const onRefresherrefresh = async () => {
  refresherTriggered.value = true
  // 重置分页数据，刷新接口
  reset()
  await getDataList()
  refresherTriggered.value = false
}

onLoad(() => {
  refreshList()
})

watch(
  () => useUserStore().userInfo.id,
  () => {
    refreshList()
  },
)

defineExpose({
  getDataList,
})
</script>

<script>
export default {
  options: {
    styleIsolation: 'shared',
  },
}
</script>

<style lang="scss" scoped>
.home-data-list {
  padding-bottom: 140rpx;

  .data-item {
    display: flex;
    margin-bottom: 26rpx;

    &-img {
      width: 258rpx;
      height: 146rpx;
      margin-right: 16rpx;
      border-radius: 5rpx;
      box-shadow: 0 3.2rpx 3.2rpx 0 #00000040;
    }

    &-info {
      flex: 1;

      .info-title {
        font-size: 24rpx;
        font-weight: 500;
        line-height: 40rpx;
        color: #fff;
      }

      .info-item {
        font-size: 22rpx;
        line-height: 31rpx;
        color: #c4c4c4;
      }

      .info-operator {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
      }

      .info-status {
        font-size: 22rpx;
        line-height: 31rpx;
      }

      .info-btn {
        width: 100rpx;
        height: 47rpx;
        font-size: 22rpx;
        font-weight: 500;
        line-height: 47rpx;
        color: #fff;
        text-align: center;
        background: #1992b0;
        border-radius: 166rpx;
        box-shadow: 0 3.6px 7.2px 0 #00000040;
      }
    }
  }

  :deep() .wd-loadmore {
    color: rgb(255 255 255 / 80%);

    .wd-divider {
      color: rgb(255 255 255 / 80%);
    }

    /* stylelint-disable-next-line selector-class-pattern */
    .wd-divider__line {
      background-color: rgb(255 255 255 / 80%);
    }
  }
}
</style>
